<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>七夕节礼物</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #fbeff5;
        user-select: none;
      }
      body {
        position: relative;
        width: 100vw;
        height: 100vh;
        font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
      }
      .sakura-canvas {
        pointer-events: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
      }
      .main-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
      }
      .title,
      .subtitle {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-align: center;
        color: #d94f7b;
        margin: 0.5em 0;
        font-weight: bold;
        letter-spacing: 2px;
        text-shadow: 0 2px 8px #fff6fa, 0 0px 2px #d94f7b44;
        pointer-events: none;
      }
      .title {
        font-size: 2.5em;
      }
      .subtitle {
        font-size: 1.3em;
        color: #d94f7b99;
        margin-bottom: 1em;
      }
      .gift-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .gift-box {
        width: 180px;
        height: 180px;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        z-index: 3;
        will-change: transform;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        outline: none;
        /* transform: translateX(2.5vw); */
      }
      .progress-circle {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 220px;
        height: 220px;
        pointer-events: none;
        z-index: 2;
      }
      .confetti {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 10;
      }
      .hidden {
        display: none !important;
      }
      .opened-title {
        font-size: 2em;
        color: #d94f7b;
        text-align: center;
        margin-top: 3em;
        font-weight: bold;
        opacity: 0;
        transition: opacity 1s;
        letter-spacing: 2px;
        text-shadow: 0 2px 8px #fff6fa, 0 0px 2px #d94f7b44;
      }
      .open-btn {
        margin-top: 2em;
        padding: 0.8em 2.5em;
        font-size: 1.3em;
        background: linear-gradient(90deg, #ffb6d5, #ffd6e7);
        color: #d94f7b;
        border: none;
        border-radius: 2em;
        box-shadow: 0 2px 8px #d94f7b22;
        cursor: pointer;
        font-weight: bold;
        transition: background 0.2s;
        outline: none;
      }
      .open-btn:active {
        background: linear-gradient(90deg, #ffd6e7, #ffb6d5);
      }
      .letter-bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0.7);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadein 1.5s;
      }
      @keyframes fadein {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .letter {
        background: rgba(255, 255, 255, 0.85);
        border-radius: 1.5em;
        box-shadow: 0 4px 32px #d94f7b33, 0 0px 2px #d94f7b22;
        padding: 2.5em 2em;
        max-width: 95vw;
        width: 90vw;
        max-width: 800px;
        max-height: 70vh;
        min-height: 320px;
        font-size: 1.25em;
        color: #d94f7b;
        font-family: "FZKai-Z03", "KaiTi", "Segoe UI", "PingFang SC",
          "Microsoft YaHei", sans-serif;
        letter-spacing: 1.5px;
        line-height: 2.1em;
        position: relative;
        z-index: 101;
        overflow-y: auto;
        text-align: left;
        box-sizing: border-box;
        opacity: 0;
        animation: letterfadein 1.5s 0.5s forwards;
      }
      @keyframes letterfadein {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .letter-content {
        white-space: pre-wrap;
        word-break: break-all;
        font-size: 1.15em;
        color: #d94f7b;
        pointer-events: auto;
        user-select: text;
      }
      .popup-overlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
      }
      .popup-overlay.visible {
        opacity: 1;
        pointer-events: auto;
      }
      .popup {
        background: #fff;
        padding: 1.5em 2em;
        border-radius: 1em;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        width: 90vw;
        max-width: 400px;
        text-align: center;
        transform: scale(0.9);
        transition: transform 0.3s;
      }
      .popup-overlay.visible .popup {
        transform: scale(1);
      }
      .popup-title {
        font-size: 1.5em;
        font-weight: bold;
        color: #d94f7b;
        margin-bottom: 0.8em;
      }
      .popup-content {
        font-size: 1.1em;
        color: #555;
        margin-bottom: 1.5em;
        line-height: 1.6;
      }
      .popup-content pre {
        background: #f0f0f0;
        padding: 1em;
        border-radius: 0.5em;
        text-align: left;
        white-space: pre-wrap;
        word-break: break-all;
        margin-top: 1em;
        font-family: "Courier New", Courier, monospace;
        color: #333;
      }
      .popup-buttons {
        display: flex;
        justify-content: space-around;
        gap: 10px;
      }
      .popup-btn {
        flex: 1;
        padding: 0.7em 1em;
        font-size: 1em;
        border: none;
        border-radius: 0.5em;
        cursor: pointer;
        transition: background 0.2s, box-shadow 0.2s;
        font-weight: bold;
        outline: none;
      }
      .popup-btn.primary {
        background: linear-gradient(90deg, #ffb6d5, #ffd6e7);
        color: #d94f7b;
        box-shadow: 0 2px 6px #d94f7b22;
      }
      .popup-btn.primary:active {
        background: linear-gradient(90deg, #ffd6e7, #ffb6d5);
      }
      .popup-btn.secondary {
        background: #f0f0f0;
        color: #666;
      }
      .popup-btn.secondary:hover {
        background: #e0e0e0;
      }
      .letter-content span {
        display: inline-block;
        opacity: 0;
        transform: scale(1.5);
        animation: char-appear 0.4s forwards;
      }
      @keyframes char-appear {
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .disintegrate {
        animation: disintegrate 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      @keyframes disintegrate {
        to {
          opacity: 0;
          filter: blur(18px) brightness(2);
          transform: scale(1.2) rotate(8deg);
        }
      }
      /* 樱花花瓣样式 -- 已被新的Canvas效果取代 */
      /*
      .petal {
        position: absolute;
        width: 32px;
        height: 32px;
        pointer-events: none;
        background: url("https://cdn.jsdelivr.net/gh/Chokcoco/iCSS@master/images/sakura.png")
          no-repeat center/contain;
        opacity: 0.85;
        z-index: 1;
        will-change: transform;
      }
      */
      @media (max-width: 600px) {
        .title {
          font-size: 1.5em;
        }
        .subtitle {
          font-size: 1em;
        }
        .gift-box {
          width: 120px;
          height: 120px;
        }
        .progress-circle {
          width: 150px;
          height: 150px;
        }
        .letter {
          width: 95vw;
          min-height: 220px;
          font-size: 1em;
        }
      }
    </style>
  </head>
  <body>
    <canvas class="sakura-canvas" id="sakura-canvas"></canvas>
    <div class="main-content" id="main">
      <div class="title" id="title">你的七夕节礼物已经准备好了！</div>
      <div class="subtitle" id="subtitle">(狂点礼物盒以拆开礼物)</div>
      <div class="gift-container" id="gift-container">
        <div class="progress-circle hidden" id="progress"></div>
        <button class="gift-box" id="gift">
          <img
            src="https://www.svgrepo.com/show/485034/gift-box.svg"
            alt="礼物盒"
            id="gift-img"
            style="width: 100%; height: 100%"
          />
        </button>
      </div>
    </div>
    <canvas class="confetti hidden" id="confetti"></canvas>
    <div class="letter-bg hidden" id="letter-bg">
      <div class="letter" id="letter">
        <div class="letter-content" id="letter-content"></div>
      </div>
    </div>
    <div class="popup-overlay" id="popup-overlay">
      <div class="popup">
        <div class="popup-title">｡:.ﾟヽ(*´∀`)ﾉﾟ.:｡</div>
        <div class="popup-content">
          别慌，你不是一个人。七夕节，怎么能只有自己被骗？现在是时候把这份“惊喜”传递下去了。复制下面的文案，送给你的朋友，看看他们收到礼物时是什么反应！
          <pre id="text-to-copy">
亲爱的，七夕快乐！为你准备了一份特别的礼物，打开它，你会明白我的心意。🎁 
http://love520.gaozaiya.cloudns.org/ 
(复制到浏览器)</pre
          >
        </div>
        <div class="popup-buttons">
          <button class="popup-btn secondary" id="popup-cancel">取消</button>
          <button class="popup-btn primary" id="popup-copy">复制文本</button>
          <button class="popup-btn primary" id="popup-details">查看仓库</button>
        </div>
      </div>
    </div>
    <script>
      // 高级樱花雨效果
      const sakuraCanvas = document.getElementById("sakura-canvas");
      const ctx = sakuraCanvas.getContext("2d");
      let dpr = window.devicePixelRatio || 1;
      let width = window.innerWidth;
      let height = window.innerHeight;
      sakuraCanvas.width = width * dpr;
      sakuraCanvas.height = height * dpr;
      ctx.scale(dpr, dpr);

      let sakuraList = [];
      const sakuraNum = 50;

      class Sakura {
        constructor() {
          this.x = Math.random() * width;
          this.y = Math.random() * height * 2 - height;
          this.vx = Math.random() * 1.5 - 0.75;
          this.vy = Math.random() * 1 + 1.5;
          this.radius = Math.random() * 1.5 + 1;
          this.alpha = Math.random() * 0.5 + 0.5;
          this.angle = Math.random() * 360;
          this.rotateSpeed = Math.random() * 2 - 1;
        }

        draw() {
          ctx.save();
          ctx.globalAlpha = this.alpha;
          ctx.fillStyle = "#ffb6c1";
          ctx.translate(this.x, this.y);
          ctx.rotate((this.angle * Math.PI) / 180);
          ctx.beginPath();
          ctx.moveTo(0, -this.radius);
          ctx.bezierCurveTo(
            this.radius,
            -this.radius,
            this.radius * 1.5,
            this.radius * 0.5,
            0,
            this.radius * 2
          );
          ctx.bezierCurveTo(
            -this.radius * 1.5,
            this.radius * 0.5,
            -this.radius,
            -this.radius,
            0,
            -this.radius
          );
          ctx.closePath();
          ctx.fill();
          ctx.restore();
        }

        update() {
          this.x += this.vx;
          this.y += this.vy;
          this.angle += this.rotateSpeed;

          if (this.y > height + this.radius * 2) {
            this.y = -this.radius * 2;
            this.x = Math.random() * width;
          }
          if (this.x > width + this.radius) {
            this.x = -this.radius;
          } else if (this.x < -this.radius) {
            this.x = width + this.radius;
          }
        }
      }

      function init() {
        for (let i = 0; i < sakuraNum; i++) {
          sakuraList.push(new Sakura());
        }
      }

      function animate() {
        ctx.clearRect(0, 0, width, height);
        sakuraList.forEach((sakura) => {
          sakura.update();
          sakura.draw();
        });
        requestAnimationFrame(animate);
      }

      init();
      animate();

      window.addEventListener("resize", () => {
        dpr = window.devicePixelRatio || 1;
        width = window.innerWidth;
        height = window.innerHeight;
        sakuraCanvas.width = width * dpr;
        sakuraCanvas.height = height * dpr;
        ctx.scale(dpr, dpr);
      });

      // 进度条绘制
      function drawProgress(percent) {
        const canvas = document.getElementById("progress");
        const size = canvas.offsetWidth;
        canvas.innerHTML = "";
        const svg = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
        );
        svg.setAttribute("width", size);
        svg.setAttribute("height", size);
        svg.innerHTML = `
        <circle cx="${size / 2}" cy="${size / 2}" r="${
          size / 2 - 16
        }" stroke="#d94f7b" stroke-width="8" fill="none" opacity="0.18"/>
        <circle cx="${size / 2}" cy="${size / 2}" r="${
          size / 2 - 16
        }" stroke="#d94f7b" stroke-width="8" fill="none" stroke-dasharray="${
          2 * Math.PI * (size / 2 - 16)
        }" stroke-dashoffset="${
          2 * Math.PI * (size / 2 - 16) * (1 - percent)
        }"/>
      `;
        canvas.appendChild(svg);
      }
      // 礼物拆开逻辑
      let progress = 0;
      let lastClick = 0;
      let progressDecay = 0.18; // 每秒递减
      let progressInc = 0.13; // 每次点击递增
      let progressInterval = null;
      let opened = false;
      const giftBtn = document.getElementById("gift");
      const giftImg = document.getElementById("gift-img");
      const progressCircle = document.getElementById("progress");
      const title = document.getElementById("title");
      const subtitle = document.getElementById("subtitle");
      function updateUI() {
        // 进度条
        if (progress > 0.01 && !opened) {
          progressCircle.classList.remove("hidden");
          drawProgress(progress);
        } else {
          progressCircle.classList.add("hidden");
        }
        // 礼物大小
        let scale = 1 + progress * 0.7;
        giftBtn.style.transform = `scale(${scale})`;
        // 标题淡出
        let titleScale = 1 - Math.min(progress, 0.8) * 0.7;
        let titleOpacity = 1 - Math.max(0, Math.min(progress / 0.8, 1));
        title.style.transform = `scale(${titleScale})`;
        title.style.opacity = titleOpacity;
        // 副标题淡出
        let subScale = 1 - Math.min(progress, 0.4) * 0.5;
        let subOpacity = 1 - Math.max(0, Math.min(progress / 0.4, 1));
        subtitle.style.transform = `scale(${subScale})`;
        subtitle.style.opacity = subOpacity;
      }
      function shakeGift() {
        giftBtn.animate(
          [
            { transform: giftBtn.style.transform + " rotate(-8deg)" },
            { transform: giftBtn.style.transform + " rotate(8deg)" },
            { transform: giftBtn.style.transform },
          ],
          {
            duration: 220,
            easing: "cubic-bezier(.4,0,.2,1)",
          }
        );
      }
      function decayLoop() {
        if (opened) return;
        let now = Date.now();
        let dt = (now - lastClick) / 1000;
        lastClick = now;
        progress -= progressDecay * dt;
        if (progress < 0) progress = 0;
        updateUI();
        if (progress >= 1) {
          openGift();
          return;
        }
        requestAnimationFrame(decayLoop);
      }
      giftBtn.addEventListener("click", () => {
        if (opened) return;
        progress += progressInc;
        if (progress >= 1) {
          progress = 1;
          updateUI();
          openGift();
          return;
        }
        shakeGift();
        updateUI();
        lastClick = Date.now();
        if (!progressInterval) {
          progressInterval = true;
          decayLoop();
        }
      });
      // 礼物打开动画
      function openGift() {
        opened = true;
        progressCircle.classList.add("hidden");
        giftBtn.classList.add("hidden");
        title.classList.add("hidden");
        subtitle.classList.add("hidden");
        showConfetti();
        setTimeout(() => {
          showOpenedTitle();
        }, 1200);
      }
      // 礼花特效
      function showConfetti() {
        const canvas = document.getElementById("confetti");
        canvas.classList.remove("hidden");
        const ctx = canvas.getContext("2d");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let confettiArr = [];
        for (let i = 0; i < 80; i++) {
          confettiArr.push({
            x: Math.random() * canvas.width,
            y: -20,
            r: 6 + Math.random() * 8,
            color: `hsl(${Math.random() * 360},80%,70%)`,
            vx: (Math.random() - 0.5) * 6,
            vy: 3 + Math.random() * 4,
            ay: 0.12 + Math.random() * 0.08,
            rot: Math.random() * 360,
            vrot: (Math.random() - 0.5) * 8,
          });
        }
        let t = 0;
        function draw() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          confettiArr.forEach((c) => {
            ctx.save();
            ctx.translate(c.x, c.y);
            ctx.rotate((c.rot * Math.PI) / 180);
            ctx.fillStyle = c.color;
            ctx.beginPath();
            ctx.ellipse(0, 0, c.r, c.r * 0.5, 0, 0, 2 * Math.PI);
            ctx.fill();
            ctx.restore();
            c.x += c.vx;
            c.y += c.vy;
            c.vy += c.ay;
            c.rot += c.vrot;
          });
          t++;
          if (t < 80) requestAnimationFrame(draw);
          else canvas.classList.add("hidden");
        }
        draw();
      }
      // 打开后新标题和按钮
      function showOpenedTitle() {
        const main = document.getElementById("main");
        main.innerHTML = `<div class='opened-title' id='opened-title'>惊喜礼物已拆开，点击下方按钮查收！</div><button class='open-btn' id='open-btn'>查收礼物</button>`;
        setTimeout(() => {
          document.getElementById("opened-title").style.opacity = 1;
        }, 100);
        const openBtn = document.getElementById("open-btn");
        openBtn.onclick = () => {
          if (openBtn.disabled) return;
          openBtn.disabled = true;
          showLetter();
        };
      }
      // 崩解动画
      function disintegrateAll() {
        document.body
          .querySelectorAll(".main-content,.opened-title,.open-btn")
          .forEach((e) => {
            e.classList.add("disintegrate");
          });
        setTimeout(() => {
          document.getElementById("main").classList.add("hidden");
          document.getElementById("confetti").classList.add("hidden");
        }, 1200);
      }
      // 信纸内容逐字显现
      const letterText = `
[8]给我最爱的人：<0.8> 

遇见你，<0.25>是<0.08>我这一生中<0.08>最幸运的事。<1.2> 
你的笑容，<0.25>是<0.08>我每天清晨<0.08>最想看到的阳光。<1.8> 
在这个<0.08>专属浪漫的节日里，<0.25>我有些藏在心里很久的话，<0.25>只想对你说...<3> 

[50]妄想症怎么治疗?
妄想症的治疗方法主要有两方面，包括药物治疗和心理治疗。
1.药物治疗：主要是使用抗精神病药物，包括奥氮平、利培酮、阿立哌唑等。如果合并有睡眠障碍，可以加用劳拉西泮、佐匹克隆等药物。在合并躁狂症的时候，可以使用碳酸锂、丙戊酸钠等药物，这些药物使用的时候要注意不要中途停药，减量宜缓慢，在使用之前都要由专业精神科医师评估，并在其指导下应用。
2.心理治疗：药物治疗症状改善后可以联合心理治疗，通过心理咨询等手段，改善患者的认知，帮助其认识患者与妄想的关系。同时还要认真倾听，对患者采用支持性治疗方法。
若患有妄想症，需要及时就医治疗。 
`;
      function showLetter() {
        disintegrateAll();
        setTimeout(() => {
          document.getElementById("letter-bg").classList.remove("hidden");
          showLetterContent();
        }, 1300);
      }
      function showLetterContent() {
        const contentDiv = document.getElementById("letter-content");
        contentDiv.innerHTML = "";
        let idx = 0;
        let speed = 12; // 默认字速
        let queue = [];
        // 解析文本
        let re = /\[(\d+)\]|<([\d.]+)>/g;
        let parts = letterText.split(re);
        let arr = [];
        for (let i = 0; i < parts.length; i++) {
          if (!parts[i]) continue;
          if (i % 3 === 1) arr.push({ type: "speed", val: parseInt(parts[i]) });
          else if (i % 3 === 2)
            arr.push({ type: "pause", val: parseFloat(parts[i]) });
          else {
            for (const char of parts[i]) {
              arr.push({ type: "char", val: char });
            }
          }
        }

        function nextChar() {
          if (idx >= arr.length) {
            setTimeout(enableInteractionAndShowPopup, 3000);
            return;
          }
          let item = arr[idx++];
          if (item.type === "speed") {
            speed = item.val;
            nextChar();
          } else if (item.type === "pause") {
            setTimeout(nextChar, item.val * 1000);
          } else if (item.type === "char") {
            if (item.val === "\n") {
              contentDiv.appendChild(document.createElement("br"));
            } else {
              const charSpan = document.createElement("span");
              charSpan.textContent = item.val;
              contentDiv.appendChild(charSpan);
            }
            setTimeout(nextChar, 1000 / speed);
          }
        }
        nextChar();
      }
      function enableInteractionAndShowPopup() {
        // 允许选择
        document.body.removeEventListener("selectstart", preventSelect);
        // 允许缩放
        document
          .querySelector('meta[name="viewport"]')
          .setAttribute(
            "content",
            "width=device-width, initial-scale=1.0, user-scalable=yes"
          );
        // 显示弹窗
        document.getElementById("popup-overlay").classList.add("visible");
      }
      // 弹窗按钮事件
      document.getElementById("popup-cancel").addEventListener("click", () => {
        document.getElementById("popup-overlay").classList.remove("visible");
      });
      document.getElementById("popup-copy").addEventListener("click", () => {
        const textToCopy = document.getElementById("text-to-copy").innerText;
        const textArea = document.createElement("textarea");
        textArea.value = textToCopy;
        textArea.style.position = "fixed";
        textArea.style.top = "-9999px";
        textArea.style.left = "-9999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
          document.execCommand("copy");
          alert("文本已成功复制到剪贴板！");
        } catch (err) {
          alert("复制失败，请手动复制。");
          console.error("Could not copy text: ", err);
        }
        document.body.removeChild(textArea);
      });
      document.getElementById("popup-details").addEventListener("click", () => {
        window.open("https://gitee.com/gaogaozai/fuck_u_qixi", "_blank");
      });
      // 禁止选中
      const preventSelect = (e) => e.preventDefault();
      document.body.addEventListener("selectstart", preventSelect);
      // 适配窗口
      window.addEventListener("resize", () => {
        document.getElementById("confetti").width = window.innerWidth;
        document.getElementById("confetti").height = window.innerHeight;
      });
    </script>
  </body>
</html>
